
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <title >字段管理</title>

    <link rel="stylesheet" type="text/css" href="/src/css/themes/default.css"/>
    <!-- iview样式 -->
    <link rel="stylesheet" type="text/css" href="/plugins/iview/css/iview.css"/>
    <!--@import url("//unpkg.com/iview/dist/styles/iview.css");-->
    <!--<link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"/>-->
    <!-- 引入layui样式 -->
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/plugins/popover/popover.css">
    <!--   <script src="//unpkg.com/vue/dist/vue.js"></script>
       <script src="//unpkg.com/iview/dist/iview.min.js"></script>-->
    <!-- 引入vue -->
    <script type="text/javascript" src="/plugins/vue/vue.min.js"></script>
    <!-- iview js -->
    <script type="text/javascript" src="/plugins/iview/js/iview.js"></script>
    <script src="/properties/config.js"></script>
    <!--引入layui.js-->
    <script src="/plugins/layui/layui.js"></script>
    <!--引入axios.js 用于ajax调用-->
    <script src="/plugins/axios/axios.min.js"></script>
    <script type="text/javascript" src="/plugins/jquery-1.9.1.min.js"></script>
    <script src="/build/js/appToken.js"></script>
    <script src="/plugins/popover/popover.js"></script>
</head>
<body>
<!--隐藏元素-->
<!--<p id="staffType"  th:attr="value=${staffType}"  hidden />-->
<!--使用v-cloak技术，在vue渲染完毕前隐藏页面，渲染完成后显示-->
<div id="app" v-cloak>
	
	 <Modal
                    v-model="dictParamField"
                    title="编辑字段"
                    :mask-closable="false" 
                    width="600">
             <i-form ref="dictParamSetForm" :model="dictParamSetForm"  :label-width="150"  >

		          <form-item label="字段名称："  prop="dictName">
		              <i-input v-model="dictParamSetForm.dictName" placeholder="字段名称..." style="width: 300px" disabled ></i-input>
		          </form-item>
		          <form-item label="字段值类型："  prop="dictDataType">
		              <i-select v-model="dictParamSetForm.dictDataType"   style="width: 300px">
		                   <i-option v-for="item in dictDataTypeList" :value="item.value" :key="item.name">{{ item.name }}</i-option>
		               </i-select>
		           </form-item>
		           <form-item label="字段分类："  prop="dictTableName">
		              <i-select v-model="dictParamSetForm.dictTableName"   style="width: 300px" disabled>
		                   <i-option v-for="item in dictTableName" :value="item.value" :key="item.name">{{ item.name }}</i-option>
		               </i-select>
		           </form-item>
          	</i-form>
				
				
				<div slot="footer" style="text-align:left">
		            <i-button type="primary" @click="saveDictParam">
		                <span >保存</span>
		            </i-button>
		            <i-button type="ghost" @click="closeDictParamFieldModal" style="margin-left: 8px;background-color:rgba(255, 153, 0, 1);color:#ffffff">取消</i-button>
		        </div>
            </Modal>
	
	
    <!-- 搜索工具框 开始-->
    <row style="padding: 10px">
        <i-col span="24">
            <Card>
                <p slot="title">
                    <Icon type="ios-search"></Icon>
                    搜索条件
                </p>
                 <!--右上侧按钮列表-->
                <i-button  slot="extra" type="info" :loading="loading" icon="ios-search" @click="toLoading" style="margin-right:10px">
                    <span v-if="!loading">查询</span>
                    <span v-else>查询中...</span>
                </i-button>
                 <!-- <i-button  slot="extra" type="info"  @click="newSalaryDictParam" style="margin-right:10px" ht-auth="newField">
                    <span>新建字段</span>
                </i-button> -->
                
                 <!--查询表单内容-->
                  <row :gutter="16">
	                 <i-form ref="searchForm"  :model="searchForm"   label-position="right" :label-width="100">
	                     <i-col span="6">
	                         <form-item label="关键字：" prop="keyworld">
	                             <i-input v-model="searchForm.keyworld" placeholder="字段名称" ></i-input>
	                         </form-item>
	                     </i-col>
	                      <i-col span="6">
	                         <form-item label="功能分类：" prop="dictTableName">
	                             <i-select v-model="searchForm.dictTableName" filterable style="width: 176px">
                                    <i-option value="t_dict_record_a">考勤字段</i-option>
                                    <i-option value="t_dict_record_b">工资字段</i-option>
                                    <i-option value="t_dict_record_c">基础字段</i-option>
                                </i-select>
	                         </form-item>
	                     </i-col>
	                 </i-form>
                 </row>
            </Card>
        </i-col>
    </row>
    
    <!-- 搜索工具框 结束-->
    <!-- 表单Grid，使用layerUI的表格组件 开始 -->
    <row style="padding: 10px">
        <i-col span="24">
            <!-- 使用方法渲染模式 -->
            <table id="listTable" lay-filter="listTable" class="layui-hide"> </table>
            <script type="text/html" id="barTools">
  				<a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="edit" >编辑</a> 
            </script>
        </i-col>
    </row>
    <!-- 表单Grid，使用layerUI的表格组件 结束 -->
    <!--导出Excel隐藏表单-->
    <iframe id="frame" name="iframe" style="display:none;"></iframe>
    <!--导出Excel隐藏表单-->
</div>

<script type="text/html" id="dictDataTypeTpl">
  {{#  if(d.dictDataType == 1){ }}
    	整数
  {{#  } else if(d.dictDataType == 2){ }}
 		文本
  {{#  } else if(d.dictDataType == 3){ }}
 		小数
  {{#  } else { }}
		日期
  {{# } }}
</script>

<script type="text/html" id="dictTableNameTpl">
  {{#  if(d.dictTableName == 't_dict_record_a'){ }}
    	考勤字段
  {{#  } else if(d.dictTableName == 't_dict_record_b'){ }}
 		工资字段
  {{#  } else if(d.dictTableName == 't_dict_record_c'){ }}
 		基础字段
  {{# } }}
</script>

<script src="/src/js/comm.js" ></script>
<script>

/*
* 贷后管理首页 台账 js
*
* */
var layer;
var table;
var basePath;
var vm;
var tableColum;
window.layinit(function (htConfig) {
    var _htConfig = htConfig;
    basePath = _htConfig.coreBasePath;
    uiBasePath = _htConfig.uiBasePath;
    vm = new Vue({
        el: '#app',
        data: {
            editSalary:false,
            loading: false,
            exporting: false,//导出标志位
            dictParamField: false,
            searchForm: {
                keyworld: '',  //关键字
                dictTableName: '', // 字段分类
            },
            dictDataTypeList: [
            	{name : '整数' , value : 1 , key : '整数'},
            	{name : '文本' , value : 2 , key : '文本'},
            	{name : '小数' , value : 3 , key : '小数'},
            	{name : '日期' , value : 4 , key : '日期'}
            ],
            dictServiceTypeList: [
            	{name : '基础信息' , value : 1 , key : '基础信息'},
            	{name : '考勤信息' , value : 2 , key : '考勤信息'},
            	{name : '应发代扣信息' , value : 3 , key : '应发代扣信息'},
            	{name : '公司支付信息' , value : 4 , key : '公司支付信息'},
            	{name : '划分维度信息' , value : 5 , key : '划分维度信息'},
            	{name : '其他信息' , value : 0 , key : '其他信息'},
            ],
            dictTableName:[
            	{name : '考勤字段' , value : 't_dict_record_a' , key : '考勤字段'},
            	{name : '薪资字段' , value : 't_dict_record_b' , key : '薪资字段'},
            	{name : '基础字段' , value : 't_dict_record_c' , key : '基础字段'},
            ],
            dictParamSetForm: {
            	dictName:'',
            	dictCode:'',
            	dictDataType:'',
            	dictServiceType:'',
            	dictTableName:'',
            },
        },

        methods: {
            //重载表格
            toLoading: function () {
                if (table == null) {
                    return;
                }
                var self = this;
                self.loading = true;
                table.reload('listTable', {
                    where: {
                        keyworld: self.searchForm.keyworld , //关键字
                        dictTableName:self.searchForm.dictTableName 
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            },
            ////  ----   单行操作界面显示  结束 -----------------
            init: function () {
                var self = this;
                //使用layerUI的表格组件
                layui.use(['layer', 'table', 'ht_ajax', 'ht_auth', 'ht_config'], function () {
                    layer = layui.layer;
                    table = layui.table;
                    //执行渲染
                    table.render({
                        elem: '#listTable' //指定原始表格元素选择器（推荐id选择器）
                        , id: 'listTable'

                        , cols: [[
                            {
                                field: 'dictName',
                                title: '字段名称',
                                width: 200
                            }, {
                                field: 'dictCode',
                                title: '字段编码'
                            },
                            {
                                field: 'dictDataType',
                                title: '字段值类型',
                                templet: '#dictDataTypeTpl'
                            },
                            {
                                field: 'dictTableName',
                                title: '字段分类',
                                templet: '#dictTableNameTpl'
                            },
                            {
                                    fixed: 'right',
                                    title: '操作',
                                    width: 178,
                                    align: 'left',
                                    toolbar: '#barTools'
                                }
                        ]], //设置表头
                        url: basePath + 'salaryDictParams/getDictParamList',
                        page: true,
                        done: function (res, curr, count) {
                            //数据渲染完的回调。你可以借此做一些其它的操作
                            //如果是异步请求数据方式，res即为你接口返回的信息。
                            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                            self.loading = false;
                        }
                    });
                    table.on('tool(listTable)', function (obj) {
                        var selectedRowInfo = obj.data;
                        if(obj.event === 'edit'){
                        	console.log("选择的行数据：", selectedRowInfo) ;   
                        	self.editSalaryDictParam(selectedRowInfo.dictCode);
                        };
                    });
                })
            },
        	
            // 编辑字段
            editSalaryDictParam:function(dictCode){
            	var self = this;
            	 var url = basePath + "salaryDictParams/getDictParam?dictCode="+ dictCode;
                 $.ajax({
                     type: "GET",
                     url: url ,
                     contentType: "application/json; charset=utf-8",
                     async: false,
                     dataType: "json",
                     success: function (result) {
                         console.log("结果：========",result);
                         if (result.returnCode == "0000") {
                        	 var data = result.data;
                        	 self.dictParamSetForm.dictName = data.dictName;
                        	 self.dictParamSetForm.dictCode = data.dictCode;
                        	 self.dictParamSetForm.dictDataType = data.dictDataType;
                        	 self.dictParamSetForm.dictServiceType = data.dictServiceType;
                        	 self.dictParamSetForm.dictTableName = data.dictTableName;
                        	 self.dictParamField = true;
                         }else{
                             self.$Modal.error({content: '消息：' + result.msg});
                         }
                     },
                     error:function (data) {
                         self.$Modal.error({content: '消息：' + data});
                         self.toLoading();
                     }

                 });
            },
          
            //新建字段
            newSalaryDictParam:function () {
            	var self = this;
            	self.dictParamField = true;
            	
            },
            // 保存字段
            saveDictParam:function(){
            	var self = this;
                
                var url = basePath + "salaryDictParams/saveDictParam";
                var data = JSON.stringify(self.dictParamSetForm);
                $.ajax({
                    type: "POST",
                    url: url ,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    dataType: "json",
                    success: function (result) {
                        console.log("结果：========",result);
                        if (result.returnCode == "0000") {
                        	 self.dictParamField = false;
                        	 self.$refs['dictParamSetForm'].resetFields();
                             self.$Modal.success({
                                 title: '',
                                 content: '操作成功'
                             });
                        }else{
                            self.$Modal.error({content: '消息：' + result.msg});
                        }
                        self.toLoading();
                    },
                    error:function (data) {
                        self.$Modal.error({content: '消息：' + data});
                        self.toLoading();
                    }

                });
                
            },
            
            // 关闭编辑窗口
            closeDictParamFieldModal:function(){
            	var self = this;
            	self.dictParamField = false;
            	self.$refs['dictParamSetForm'].resetFields();
            },
            
        },
        mounted:function(){
            this.init();
        }
    });
});
//















</script>

</body>
</html>